<template>
  <div class="wastebill" style="padding-top:46px">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="废品历史账本" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <van-tabs class="tabs" v-model="active" :swipe-threshold="5" sticky swipeable>
      <van-tab v-for="tab in tabs" :title="tab.name" :key="tab.key">
      </van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" @load="onLoad" :immediate-check="false">
      <!-- 没有数据是状态 -->
      <div v-show="list.length == 0" class="KC_no_msg">
        <img src="../../asset/images/wastebill.png" alt="">
        <div class="KC_no_msg_text">亲,您还没有相关数据哦~</div>
      </div>
      <van-panel v-for="item in list" :key="item.id" class="o_panel">
        <div slot="header" class="o_panel_header">
          <div class="left_box">
            <img class="img" src="../../asset/images/wastebill@3x.png">
          </div>
          <div class="center_box">
            <p class="p1">{{item.dealNo}}</p>
            <p>{{item.kucun}}</p>
          </div>
          <div class="right_box">
            <p @click="alertMsg">{{item.msg}}</p>
          </div>
        </div>
      </van-panel>
    </van-list>
  </div>
</template>

<script type="text/babel">
  import {
    pollenRecordDetail
    // selectByRecordNo
  } from 'services/pollenRecord';
  import { mapGetters } from 'vuex';
  export default {
    name: 'wastebill',
    data() {
      return {
        active: 0,
        tabs: [
          { key: 0, name: '当前库存' },
          { key: 1, name: '历史记录' },
        ], // 状态tab
        list: [], // 列表数据
        loading: false, // 是否显示加载中
        finished: false, // 加载是否完成
        page: 1, // 当前第几页
        // memberInfo: {},
        // userInfo: {
        //   userNo: '728a3c1d94a442a7b901d5277014f628'
        // },
      };
    },
    created() {
      // 初始化加载
      this.getList();
    },
    watch: {
      active() {
        // 切换tab时重新加载数据
        this.getList();
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      back() {
        // 返回首页
        this.$router.go(-1);
      },
      alertMsg() {
        this.$dialog.confirm({
          title: '归零库存',
          message: '<div style="text-align:center;">归零后数据无法恢复，请谨慎操作</div>'
        });
      },
      /*
      * @author JinHang
      * @description 列表的懒加载
      * @date 2018/8/9 9:57
      * */
      onLoad() {

        // post数据
        const params = {
          begin: (this.page - 1) * 10,
          rows: 10,
          userNo: this.userInfo.userNo
        };

        // 是否是全部或者其他状态
        if (this.active > 0) {
          params.status = this.active;
        }

        pollenRecordDetail(params).then((response) => {

          const { count, object } = response;

          object.forEach((item, index) => {
            this.list.push(item);
          });

          this.loading = false;

          if (this.list.length >= 10 && this.list.length < count) { // 当请求拿到的数据小于总条数并且还有下一页时
            // 将当前页+1
            this.page += 1;
            // 设置加载完成为false
            this.finished = false;
          } else if (this.list.length === 10 && this.list.length === count) { // 当刚好只有一页时
            // 设置加载完成为true
            this.finished = true;
          } else if (this.list.length < 10 || this.list.length === count) { // 当一页都没满时
            // 设置加载完成为true
            this.finished = true;
          }
        });

      },
      /*
      * @author JinHang
      * @description 重新加载列表数据
      * @date 2018/8/9 10:01
      * */
      getList() {
        // 初始化一些数据
        this.finished = true;
        this.loading = false;
        this.page = 1;
        this.list = [];

        // 以下同上
        const params = {
          begin: (this.page - 1) * 10,
          rows: 10,
          userNo: this.userInfo.userNo
        };

        if (this.active > 0) {
          params.status = this.active;
        }

        pollenRecordDetail(params).then((response) => {

          const { count, object } = response;

          object.forEach((item, index) => {
            this.list.push(item);
          });

          this.loading = false;

          if (this.list.length >= 10 && this.list.length < count) {
            this.page += 1;
            this.finished = false;
          } else if (this.list.length === 10 && this.list.length === count) {
            this.finished = true;
          } else if (this.list.length < 10 || this.list.length === count) {
            this.finished = true;
          }

        });
      },
    },
  };
</script>

<style lang="less">
  .wastebill {
    .tabs {
      .van-tab {
        font-size: 32px;
        color: #999;
        &.van-tab--active {
          color: #f7a427;
        }
      }
      .van-tabs__line {
        background-color: #f7a427;
      }
    }
    .KC_no_msg {
      text-align: center;
      margin: 0 auto;
      padding-top: 200px;
      img {
        width: 280px;
        height: 280px;
        padding-bottom: 30px;
      }
      .KC_no_msg_text {
        font-size: 28px;
        columns: #999;
      }
    }
    .o_panel {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 32px;
      .o_panel_header {
        display: flex;
        padding: 30px;
        .left_box {
          width: 150px;
          .img {
            display: block;
            width: 120px;
            height: 120px;
          }
        }
        .center_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 50%;
          p {
            margin: 0;
            line-height: 40px;
            &.p1 {
              font-size: 28px;
              font-weight: bold;
              color: #333;
            }
            &.p2 {
              font-size: 24px;
              color: #999;
            }
          }
        }
        .right_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 90px;
          p {
            margin: 0;
            font-size: 32px;
            color: red;
            text-align: right;
          }
        }
      }
    }
    .history {
      display: flex;
      margin: 20px 0px;
      padding: 0 30px;
      font-size: 32px;
      background: #fff;
      .history_left {
        width: 180px;
        padding-top: 30px;
        img {
          width: 120px;
          height: 120px;
        }
      }
      .history_center {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        width: 60%;
        p {
          margin: 0;
          line-height: 40px;
          &.p1 {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin: 15px 0;
          }
          &.p2 {
            font-size: 28px;
            color: #999;
          }
        }
      }
    }
  }

</style>